<template>
	<view>
		<!-- 自定义导航栏 -->
		<!-- 顶部 -->
		<view class="topBar">
			<view>
				<uni-nav-bar @clickLeft="back" height="50px" backgroundColor="#3284fc" left-icon="left" :border="false"
					leftText="返回" rightText="设置" title="优惠卷" color="#fff" />
			</view>

			<!-- 优惠卷信息 -->
			<view class="Info">
				<uni-card class="card1">
					<view class="contentItem">
						<view class="infos1">
							<view>
								<view style="color: #fff; font-size: 30rpx;">仅限于XX加油站使用</view>
								<view style="color: #fff; font-size: 36rpx; font-weight: 700;">满200可用</view>
							</view>
							<view style="color: #fff; font-size: 80rpx; font-weight: 700;">￥20</view>
						</view>
						<view class="infos2">
							<view style="color: #fff; font-size: 30rpx;">有效期至:</view>
							<view style="color: #fff; font-size: 30rpx;">2020.04.11-2023.05.11</view>
							<view style="color: #fff; font-size: 30rpx;">去使用</view>
							<uni-icons type="right" size="20" color="#fff"></uni-icons>
						</view>
					</view>
					
					<view class="contentItem">
						<view class="infos1">
							<view>
								<view style="color: #fff; font-size: 30rpx;">仅限于XX加油站使用</view>
								<view style="color: #fff; font-size: 36rpx; font-weight: 700;">满200可用</view>
							</view>
							<view style="color: #fff; font-size: 80rpx; font-weight: 700;">￥20</view>
						</view>
						<view class="infos2">
							<view style="color: #fff; font-size: 30rpx;">有效期至:</view>
							<view style="color: #fff; font-size: 30rpx;">2020.04.11-2023.05.11</view>
							<view style="color: #fff; font-size: 30rpx;">去使用</view>
							<uni-icons type="right" size="20" color="#fff"></uni-icons>
						</view>
					</view>
					
					<view class="contentItem">
						<view class="infos1">
							<view>
								<view style="color: #fff; font-size: 30rpx;">仅限于XX加油站使用</view>
								<view style="color: #fff; font-size: 36rpx; font-weight: 700;">满200可用</view>
							</view>
							<view style="color: #fff; font-size: 80rpx; font-weight: 700;">￥20</view>
						</view>
						<view class="infos2">
							<view style="color: #fff; font-size: 30rpx;">有效期至:</view>
							<view style="color: #fff; font-size: 30rpx;">2020.04.11-2023.05.11</view>
							<view style="color: #fff; font-size: 30rpx;">去使用</view>
							<uni-icons type="right" size="20" color="#fff"></uni-icons>
						</view>
					</view>
				</uni-card>
			</view>
			{{name}}-----{{age}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
               name:'',
			   age:'',
			}
		},
		methods: {
			back() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
		},
		onLoad(e) {
			this.name=e.name,
			this.age=e.age
		}
	}
</script>

<style>
	page{
		background-color: #fff;
	}
	.contentItem .infos2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 50rpx;
		width: 570rpx;
		margin-top: 20rpx;
	}

	.contentItem .infos1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 50rpx;
		width: 500rpx;
		padding-top: 50rpx;
		padding-bottom: 40rpx;
		border-bottom: 2rpx solid #bfbfbf;
	}

	.contentItem {
		width: 630rpx;
		height: 280rpx;
		background-image: url(@/static/myf_img/椭圆 3 拷贝@2x.png);
		background-size: cover;
	    margin-top: 30rpx;
	}

	.card1 {
		border-radius: 30rpx;
	}

	.topBar {
		background-color: #3284fc;
		width: 750rpx;
		height: 400rpx;
	}
</style>